<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">

<link rel="import" href="neuro-statbar.html">
<link rel="import" href="neuro-window.html">
<link rel="import" href="draggable-behavior.html">

<dom-module id="quest-display">
  <template>
    <style>
      :host {
        cursor: pointer;
        display: block;
        overflow: hidden;
        width: 320px;
        user-select: none;

        --quest-color: #fbc02d;
      }

      .window {
        --neuro-window-border-color: var(--quest-color);
      }
      .quest {
        position: relative;
      }
      .quest + .quest {
        top: -1px;
      }
      .quest__name {
        background-color: #333;
        border-left-width: 0;
        border: 1px solid var(--quest-color);
        color: var(--quest-color);
        font-size: 16px;
        font-weight: bold;
        left: -8px;
        padding: 4px 12px;
        position: relative;
        transform: skew(-20deg);
      }
      .quest__name__text {
        transform: skew(20deg);
      }
      .quest__name.empty {
        border-bottom: none;
      }
      .quest__progress {
        height: 4px;
        transition: width 500ms ease;
        background: linear-gradient(90deg, var(--quest-color), #ff8f00);
        position: absolute;
        bottom: 0;
        left: 12px;
      }
      .quest__goals {
        padding-left: 12px;
        color: var(--quest-color);
        border-bottom: 1px solid var(--quest-color);
        border-right: 1px solid var(--quest-color);
        width: calc(100% - 27px);
        background-color: #222;
      }
      .quest__goal, .quest__name__text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
    <neuro-window class="window">
      <span slot="title">Quests</span>

      <template is="dom-if" if="[[!_hasQuests]]" restamp>
        <div class="quest">
          <div class="quest__name empty">No active quests</div>
        </div>
      </template>
      <template is="dom-repeat" items="[[formattedQuests]]" as="quest">
        <div class="quest" title$="[[quest.data.config.title]]" on-click="_showQuests">
          <div class="quest__name">
            <div class="quest__name__text">[[quest.data.config.title]]</div>
            <div class="quest__progress" style="width: [[quest.data.progress.percent]]%;"></div>
          </div>
          <div class="quest__goals">
            <template is="dom-repeat" items="[[quest.data.state]]" as="goal">
              <div class="quest__goal">
                [[goal.progress.display]]
              </div>
            </template>
          </div>
        </div>
      </template>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class QuestDisplay extends Neuro.DraggableBehavior(Polymer.Element) {
      static get is() { return 'quest-display'; }
      static get properties() {
        return {
          quests: {
            type: Array,
            value: function () {
              return [];
            },
          },

          formattedQuests: {
            type: Array,
            computed: '_computeFormattedQuests(quests)',
          },

          _hasQuests: {
            type: Boolean,
            computed: '_computeHasQuests(quests.*)',
          },

          _toggled: {
            type: Boolean,
            value: false,
          },
        };
      }

      _toggleList() {
        this._toggled = !this._toggled;
      }

      _computeFormattedQuests() {
        if (!this.quests) {
          return [];
        }

        return this.quests.map(quest => {
          return ({ entityReference: quest[0], data: quest[1] })
        });
      }

      _computeHasQuests() {
        if (!this.quests) {
          return false;
        }
        return this.quests.length > 0;
      }

      _showQuests(e) {
        this.dispatchEvent(new CustomEvent('show-quests'));
      }
    }

    window.customElements.define(QuestDisplay.is, QuestDisplay);
  </script>
</dom-module>
